<!--  -->
<script setup>
import { reactive, ref } from "vue";
import { userAccountLogin } from "@/api/login";
import {
  NCard,
  NTabs,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NFormItemRow,
  NTabPane,
  NCheckbox,
  NInputGroup,
  useMessage,
} from "naive-ui";
import store from "@/store";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
let btnloading = ref(false);
const message = useMessage();
const formRef = ref(null);

let formValue = ref({
  account: "zhousg",
  password: "123456",
  mobile: null,
  code: null,
  article: true,
});

const login = () => {
  if (
    formValue.value.article &&
    formValue.value.account != "" &&
    formValue.value.password != ""
  ) {
    btnloading.value = true;
    userAccountLogin(formValue.value)
      .then((res) => {
        const path = route.query.redirectUrl || null;
        store.commit("saveUserInfo", res);
        btnloading.value = false;
        store.dispatch("mergeCart").then(() => {
          message.success("登录成功");
          router.push(path ? path : "/");
        });
      })
      .catch((err) => {
        message.error("账号或密码错误");
        btnloading.value = false;
      });
  } else if (formValue.value.account == "" || formValue.value.account == "") {
    message.error("账号或密码不能为空");
  } else {
    message.warning("请勾选同意条约");
  }
};
</script>

<template>
  <login-header></login-header>
  <section class="login-section">
    <div class="wrapper">
      <n-card :bordered="false">
        <n-tabs default-value="signin" size="large">
          <n-tab-pane name="signin" tab="账户登录">
            <n-form>
              <n-form-item-row label="用户名">
                <n-input-group>
                  <n-input
                    placeholder="请输入用户名"
                    v-model:value="formValue.account"
                  >
                    <template #prefix>
                      <i class="iconfont icon-user icon"></i>
                    </template>
                  </n-input>
                </n-input-group>
              </n-form-item-row>
              <n-form-item-row label="密码">
                <n-input-group>
                  <n-input
                    placeholder="请输入密码"
                    type="password"
                    v-model:value="formValue.password"
                    show-password-on="mousedown"
                  >
                    <template #prefix>
                      <i class="iconfont icon-lock icon"></i>
                    </template>
                  </n-input>
                </n-input-group>
              </n-form-item-row>
            </n-form>
            <p class="ty">
              <n-checkbox v-model:checked="formValue.article"> </n-checkbox>
              我已同意<span>《隐私条约》</span>和 <span>《服务条款》</span>
            </p>
            <n-button
              type="primary"
              block
              secondary
              strong
              @click="login"
              :loading="btnloading"
            >
              登录
            </n-button>
            <div class="sflogin">
              <div><a href="#">忘记密码</a><a href="#">免费注册</a></div>
            </div>
          </n-tab-pane>
          <n-tab-pane name="signup" tab="扫码登录">
            <div class="ewm">
              <img
                src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg"
                alt=""
              />
              <p>打开<span> 手机软件 </span>扫码登陆</p>
            </div>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </section>
  <login-footer></login-footer>
</template>

<style lang='less' scoped>
.login-section {
  background: url(http://erabbit.itheima.net/img/login-bg.696efec3.png)
    no-repeat center / cover;
  height: 488px;
  position: relative;
  .wrapper {
    width: 380px;
    min-height: 400px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 45px;
    padding: 0px 5px;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
  .login-text {
    float: right;
    font-size: 13px;
    padding-right: 10px;
    color: @xtxColor;
    cursor: pointer;
  }
  .icon {
    font-size: large;
    padding-right: 5px;
    color: #666;
  }
  .ty {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 15px;
    .n-checkbox {
      margin-right: 5px;
    }
    span {
      color: @xtxColor;
      cursor: pointer;
    }
  }
  .sflogin {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 13px;
    img {
      cursor: pointer;
    }
    a {
      margin-right: 15px;
      color: #666;
    }
  }
  .ewm {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    p {
      margin-top: 40px;
      span {
        color: @xtxColor;
        cursor: pointer;
      }
    }
  }
}
</style>